<template>
	<div class="content">
	  <div style="margin: 30px;">
      <el-button plain class="el-icon-circle-plus-outline" @click="ShowDlogForm=true"> 新增账户</el-button>
      <div class="span_tit"><span>现金</span>Ex. 【柜台现金】、 【零用金】与【电子化支付】。</div>
      <el-table :data="tableData.filter(data => data.atype=='现金')" style="width: 100%">
        <el-table-column align="center" label="名称" prop="aname">
        </el-table-column>
        <el-table-column align="center" label="主用币种" prop="mainCurrency">
          <template slot-scope="scope">
            <div v-for="itme in currency">
              <span v-if="itme.cid==scope.row.mainCurrency">{{itme.cnName}}({{itme.enName}})</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="编号" prop="acode">
        </el-table-column>
        <el-table-column align="center" label="最后交易日" prop="recentlyTime">
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="createtime">
        </el-table-column>
        <el-table-column align="center" label="是否停用" prop="stop">
          <template slot-scope="scope">
            <template v-if="scope.row.stop==0">
              <span style="background: #85ce61;border-color: #85ce61;color: #FFF;padding: 7px 15px;font-size: 12px;border-radius: 3px;">否</span>
            </template>
            <template v-else>
              <span style="background: #F78989;border-color: #F78989;color: #FFF;padding: 7px 15px;font-size: 12px;border-radius: 3px;">是</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column width="400" label="功能" fit align="left">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="showEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="primary" @click="findBalance(scope.row.aid)">余额列表</el-button>
            <el-button size="mini" :type="scope.row.stop==0?'danger':'success'" @click="stop(scope.row)">{{scope.row.stop==0?'停用':'启用'}}</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row.aid)">删除</el-button>
            <el-button size="mini" type="primary" @click="handleSelect(scope.row)">交易明细</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="span_tit"><span>银行存款</span>Ex. 以公司名义开立的各种【银行户头】。</div>
      <el-table :data="tableData.filter(data => data.atype=='银行存款')" style="width: 100%">
        <el-table-column align="center" label="名称" prop="aname">
        </el-table-column>
        <el-table-column align="center" label="主用币种" prop="mainCurrency">
          <template slot-scope="scope">
            <div v-for="itme in currency">
              <span v-if="itme.cid==scope.row.mainCurrency">{{itme.cnName}}({{itme.enName}})</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="编号" prop="acode">
        </el-table-column>
        <el-table-column align="center" label="最后交易日" prop="recentlyTime">
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="createtime">
        </el-table-column>
        <el-table-column align="center" label="是否停用" prop="stop">
          <template slot-scope="scope">
            <template v-if="scope.row.stop==0">
              <span style="background: #85ce61;border-color: #85ce61;color: #FFF;padding: 7px 15px;font-size: 12px;border-radius: 3px;">否</span>
            </template>
            <template v-else>
              <span style="background: #F78989;border-color: #F78989;color: #FFF;padding: 7px 15px;font-size: 12px;border-radius: 3px;">是</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column width="400" label="功能" fit align="left">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="showEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="primary" @click="findBalance(scope.row.aid)">余额列表</el-button>
            <el-button size="mini" :type="scope.row.stop==0?'danger':'success'" @click="stop(scope.row)">{{scope.row.stop==0?'停用':'启用'}}</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row.aid)">删除</el-button>
            <el-button size="mini" type="primary" @click="handleSelect(scope.row)">交易明细</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="span_tit"><span>信用卡</span>专指【公司信用卡】，若是个人信用卡支付，请使用代垫款纪录。</div>
      <el-table :data="tableData.filter(data => data.atype=='信用卡')" style="width: 100%">
        <el-table-column align="center" label="名称" prop="aname">
        </el-table-column>
        <el-table-column align="center" label="主用币种" prop="mainCurrency">
          <template slot-scope="scope">
            <div v-for="itme in currency">
              <span v-if="itme.cid==scope.row.mainCurrency">{{itme.cnName}}({{itme.enName}})</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="编号" prop="acode">
        </el-table-column>
        <el-table-column align="center" label="最后交易日" prop="recentlyTime">
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="createtime">
        </el-table-column>
        <el-table-column align="center" label="是否停用" prop="stop">
          <template slot-scope="scope">
            <template v-if="scope.row.stop==0">
              <span style="background: #85ce61;border-color: #85ce61;color: #FFF;padding: 7px 15px;font-size: 12px;border-radius: 3px;">否</span>
            </template>
            <template v-else>
              <span style="background: #F78989;border-color: #F78989;color: #FFF;padding: 7px 15px;font-size: 12px;border-radius: 3px;">是</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column width="400" label="功能" fit align="left">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="showEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="primary" @click="findBalance(scope.row.aid)">余额列表</el-button>
            <el-button size="mini" :type="scope.row.stop==0?'danger':'success'" @click="stop(scope.row)">{{scope.row.stop==0?'停用':'启用'}}</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row.aid)">删除</el-button>
            <el-button size="mini" type="primary" @click="handleSelect(scope.row)">交易明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

		<!-- 新增弹出层 -->
		<el-dialog title="添加新账户" :visible.sync="ShowDlogForm" width="600px">
			<el-form :model="addFrom">
				<el-form-item label="账户名称" :label-width="formLabelWidth" >
					<el-input v-model="addFrom.aname" placeholder="请输入用户名称" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="账户编号" :label-width="formLabelWidth" >
					<el-input v-model="addFrom.acode" placeholder="请输入用户编号" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="主要币种" :label-width="formLabelWidth">
					<el-select v-model="addFrom.mainCurrency" placeholder="请选择币种">
						<template v-for="cur in currency">
							<el-option :label="cur.cnName+'('+cur.enName+')'" :value="cur.cid"></el-option>
						</template>
					</el-select>
				</el-form-item>

				<el-form-item label="账户类型" :label-width="formLabelWidth">
					<el-select v-model="addFrom.atype" placeholder="请选择类型">
						<el-option label="现金" value="现金"></el-option>
						<el-option label="信用卡" value="信用卡"></el-option>
						<el-option label="银行存款" value="银行存款"></el-option>
					</el-select>
				</el-form-item>


			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="ShowDlogForm = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</div>
		</el-dialog>


		<!-- 编辑弹出层 -->
		<el-dialog title="添加新账户" :visible.sync="ShowEditForm" width="600px">
			<el-form :model="addFrom">
				<el-form-item label="账户名称" :label-width="formLabelWidth">
					<el-input v-model="editData.aname" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="账户编号" :label-width="formLabelWidth">
					<el-input v-model="editData.acode" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="主要币种" :label-width="formLabelWidth">
					<el-select v-model="editData.mainCurrency" placeholder="请选择币种">
						<template v-for="cur in currency">
							<el-option :label="cur.cnName" :value="cur.cid"></el-option>
						</template>
					</el-select>
				</el-form-item>

				<el-form-item label="账户类型" :label-width="formLabelWidth">
					<el-select v-model="editData.atype" placeholder="请选择类型">
						<el-option label="现金" value="现金"></el-option>
						<el-option label="信用卡" value="信用卡"></el-option>
						<el-option label="银行存款" value="银行存款"></el-option>
					</el-select>
				</el-form-item>


			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="ShowEditForm = false">取 消</el-button>
				<el-button type="primary" @click="edit()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 余额列表 -->
		<el-dialog title="资金账户余额" :visible.sync="showBalance" width="400px">
		  <el-table :data="balanceList" max-height="600px">
		    <el-table-column property="balance" label="账户余额" width="150" align="center"></el-table-column>
		    <el-table-column property="ofCurrency" label="币种类型" align="center">
          <template slot-scope="scope">
            <div v-for="itme in currency">
              <span v-if="itme.cid==scope.row.ofCurrency">{{itme.cnName}}({{itme.enName}})</span>
            </div>
          </template>
        </el-table-column>
		  </el-table>
		</el-dialog>

    <el-dialog title="查看交易详细" :visible.sync="selectOpen" width="1300px">
      <div class="top_filter_col">
        <span class="top_filter_col_tit">类型</span>
        <el-select v-model="searchFrom.dtype" placeholder="请选择" @input="searchFun()">
          <el-option label="不限" value=""></el-option>
          <el-option label="收入" value="收入"></el-option>
          <el-option label="支出" value="支出"></el-option>
          <el-option label="转移" value="转移"></el-option>
          <el-option label="应收款" value="应收款"></el-option>
          <el-option label="应付款" value="应付款"></el-option>
        </el-select>
      </div>
      <el-table :data="tableData1" border>
        <el-table-column align="center" prop="dtype" label="类型">
          <template slot-scope="scope">
            <span class="btn" style="background: #67C23A;" v-if="scope.row.dtype=='收入'">收入</span>
            <span class="btn" style="background: #409EFF;" v-if="scope.row.dtype=='支出'">支出</span>
            <span class="btn" style="background: #a6b1bb;" v-if="scope.row.dtype=='转移'">转移</span>
            <span class="btn" style="background: #82b6ec;" v-if="scope.row.dtype=='应收款'">应收款</span>
            <span class="btn" style="background: #436e9a;" v-if="scope.row.dtype=='应付款'">应付款</span>
          </template>
        </el-table-column>
        <el-table-column label="交易时间" align="center" prop="transactionDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.transactionDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="资金账户" align="center" prop="ofAccount">
          <template slot-scope="scope">
            <div v-for="itme in accountList" >
                        <span v-if="itme.aid==scope.row.ofAccount">
                          {{itme.aname}}
                        </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="交易原因" align="center" prop="ofReason">
          <template slot-scope="scope">
            <div v-for="itme in reasonList" >
              <span v-if="scope.row.ofReason==itme.rid">{{itme.rname}}</span>

            </div>
            <span v-if="scope.row.dtype=='转移'">移转</span>
          </template>
        </el-table-column>
        <el-table-column label="交易金额" align="center" prop="money" />
        <el-table-column label="目标金额" align="center" prop="mainCurrencyMoney" />
        <el-table-column label="对象" align="center" prop="object" />
        <el-table-column align="center" prop="" label="币种">
          <template slot-scope="scope">
          <span v-for="itme in currencyList" v-if="scope.row.ofCurrency==itme.cid">
            {{itme.cnName}}({{itme.enName}})
          </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="附注说明" prop="comment"/>
        <el-table-column align="center" label="标签" prop="tag"/>
        <el-table-column align="center" label="营业税" prop="tax"/>
        <el-table-column align="center" label="手续费" prop="serviceCharge"/>
        <el-table-column align="center" label="税率类型" prop="taxRateType"/>
        <el-table-column align="center" label="发票号码" prop="invoice"/>
        <el-table-column align="center" label="附件">
          <template slot-scope="scope">
            <a target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null"
               :href="url+scope.row.attachment">
              <el-button type="primary" size="mini">查看</el-button>
            </a>
            <a target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleDownload(scope.row)"
              >下载
              </el-button>
            </a>

          </template>
        </el-table-column>

      </el-table>
      <div class="pagination_box">
        <pagination
          v-show="total>0"
          :total="total"
          :page-sizes="[7, 14, 28, 56]"
          :page-size="7"
          :page.sync="searchFrom.pageNum"
          :limit.sync="searchFrom.pageSize"
          @pagination="getData"
        />
      </div>
    </el-dialog>
	</div>
</template>

<script>
import {listAccount,updateAccount,addAccount,delAccount} from '@/api/system/account';
import {listCurrency} from '@/api/system/currency';
import {listBalance} from '@/api/system/balance';
import {ListTransactionDetail,updateTransactionDetail} from '@/api/system/transactionDetail';
import { getInfo } from "@/api/login";
import {listReason} from '@/api/system/reason';
export default {
		data() {
			return {
				formLabelWidth: '80px',
				showBalance:false,//显示余额列表
				ShowDlogForm: false,//显示新增弹出
				ShowEditForm: false,//修改弹出
				balanceList:'',
				tableData: [],
				tableData1: [],
				search: '',
				account: {},
        total:null,
				currency: '', //币种
				addFrom: {
					aname: '',
					acode: '',
					atype: '',
					mainCurrency: '',
				},
				editData: '', //点击编辑的列
        selectOpen:false,
        searchFrom: {
          pageNum: 1, // 条数
          pageSize: 7, // 页数
        }
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				let that = this
        getInfo().then(data=>{
          listAccount({ofCompany:data.tuser.ofCompany}).then(res => {
            if (res.code == 200) {
              that.tableData = res.rows;
              listCurrency().then(data=>{
                that.currency = data.rows;
              })
            }
          })
          let account={};
          account.ofCompany=data.tuser.ofCompany;
          account.atype = "现金";
          listAccount(account).then(date => {
            this.accountOptions[0].options = date.rows;
          })
          account.atype = "银行存款";
          listAccount(account).then(date => {
            this.accountOptions[1].options = date.rows;
          })
          account.atype = "信用卡";
          listAccount(account).then(date => {
            this.accountOptions[2].options = date.rows;
          })
          listAccount({ofCompany:data.tuser.ofCompany}).then(date => {
            this.accountList = date.rows;
          })

          listCurrency().then(date => {
            this.currencyList = date.rows;
          })
          listReason({parent: "-1", rtype: "收入"}).then(date => {
            this.reasonSrList = date.rows;
          })
          listReason({parent: "-1", rtype: "支出"}).then(date => {
            this.reasonZcList = date.rows;
          })
          listReason().then(date => {
            this.reasonList = date.rows;
          })
        })

        this.searchFrom.deleted=0;
        ListTransactionDetail(this.searchFrom).then(res => {
          if (res.code == 200) {
            this.tableData1 = res.rows
            this.total = res.total
          }
        })
			},
			add() {
				let that = this
        let aData = new Date();
        let date=aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate()+" "+aData.getHours()+":"+aData.getMinutes()+":"+aData.getSeconds();
        this.addFrom.recentlyTime=date;
        this.addFrom.createtime=date;
        getInfo().then(data=>{
          this.addFrom.ofCompany=data.tuser.ofCompany;
          addAccount(this.addFrom).then(res => {
            if (res.code == 200) {
              that.$notify({
                title: '添加账户成功！',
                // message: '修改成功',
                type: 'success'
              });
              that.getData()
            }
            that.ShowDlogForm = false
          })
        })

			},
			stop(row) {
				let that = this
        let stop=0;
        if(row.stop==0){
          stop=1;
        }else if(row.stop==1){
          stop=0;
        }
				updateAccount({aid:row.aid,stop:stop}).then(res => {
					if (res.code == 200) {
            that.$notify({
              title: '操作成功！',
              // message: '修改成功',
              type: 'success'
            });
						that.getData()
					}else{
            that.$notify({
              title: '操作失败',
              // message: '修改成功',
              type: 'error'
            });
          }
					that.ShowDlogForm = false
				})
			},
			showEdit(row) {
				this.editData = row
				this.ShowEditForm = true
			},
			edit() {
				let that = this
				updateAccount(this.editData).then(res => {
					if (res.code == 200) {
						that.getData()
						that.$notify({
							title: '修改成功',
							// message: '修改成功',
							type: 'success'
						});
					}
					that.ShowEditForm = false
				})
			},
			del(id) {
				let that = this
				this.$confirm('确认删除？')
					.then(_ => {
            delAccount(id).then(res => {
							if (res.code == 200) {
								that.getData()
								that.$notify({
									title: '删除成功',
									// message: '修改成功',
									type: 'success'
								});
							}
						})
						done();
					})
					.catch(_ => {});

			},
			findBalance(aid) {
				let that = this
        let balance={}
        balance.ofAccount=aid;
        listBalance(balance).then(res => {
					if (res.code == 200) {
						// that.getData()
						that.balanceList=res.rows
						this.showBalance=true
					}
				})
			},
      handleSelect(row){
        this.searchFrom.deleted=0;
        this.searchFrom.ofAccount=row.aid
        ListTransactionDetail(this.searchFrom).then(res => {
          if (res.code == 200) {
            this.selectOpen=true;
            this.tableData1 = res.rows
            this.total = res.total
          }
        })
      },searchFun(){
        this.searchFrom.deleted=0;
        ListTransactionDetail(this.searchFrom).then(res => {
          if (res.code == 200) {
            this.selectOpen=true;
            this.tableData1 = res.rows
            this.total = res.total
          }
        })
      }
		}
	}
</script>

<style lang="scss">
	.span_tit {
		display: flex;
		align-items: center;
		width: 100%;
		height: 50px;

		span {
			margin: 0 10px;
			font-weight: bold;
		}
	}
  .btn {
    padding: 4px 8px;
    color: white;
    border-radius: 4px;
  }
</style>
